<template>
  <el-dialog
    :z-index="1000"
    title="换绑顾问"
    :visible.sync="visible"
    width="500px"
    :before-close="handleClose"
    destroy-on-close
  >
    <div class="record-wrapper">
      <div class="container">
        <div class="remind">
          如果顾问名称不在列表中，请联系项目相关管理人员进行配置
        </div>
        <el-form
          class="form"
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="126px"
          label-suffix="："
        >
          <el-form-item label="当前顾问" v-if="selectedRow.cardType">
            <el-input
              placeholder=""
              v-model="form.currentConsultant"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="换绑顾问">
            <el-select
              class="select"
              v-model="form.nextConsultant"
              placeholder="请选择换绑顾问"
            >
              <el-option
                v-for="item in nextConsultantList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div class="operation">
        <el-button
          class="btn"
          type="primary"
          v-loading="loading"
          @click="onSubmit"
          >确 定</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getCardTypeConsultantList, changeBindConsultant } from "@/api/index";
export default {
  name: "changeConsultant",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedRow: {
      type: Object,
      default: () => {},
    },
    cardType: {
      type: Number,
      default: "",
    },
    personIdStrList: {
      type: Array,
      default: [],
    },
  },
  watch: {
    cardType: {
      handler(nval, oval) {
        this.getCardTypeConsultantListFn();
      },
      immediate: true,
      deep: true,
    },
    personIdStrList: {
      handler(nval, oval) {
        let temp = [];
        this.personIdStrList.forEach((item) => {
          temp.push(item.personId);
        });
        this.localPersonIdStrList = temp;
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      localPersonIdStrList: [],
      loading: false,
      rules: {},
      form: {
        currentConsultant: "", // 当前顾问
      },
      nextConsultantList: [], // 换绑顾问列表
    };
  },
  methods: {
    async getCardTypeConsultantListFn() {
      const params = {
        examineStatus: 10,
        cardType: this.selectedRow.cardType || this.cardType,
        useStatus: 1,
      };
      const res = await getCardTypeConsultantList(params);
      if (res.code == 200) {
        res.data.forEach((item) => {
          item.label = item.consultantName;
          item.value = item.consultantId;
        });
        this.nextConsultantList = res.data;
      }
    },
    async changeBindConsultantFn() {
      const params = {
        consultantId: this.form.nextConsultant,
        personId: this.selectedRow.personId,
        personIdStrList: this.localPersonIdStrList.toString(),
        oaId: JSON.parse(sessionStorage.getItem("userInfo")).user_source_id,
      };
      const res = await changeBindConsultant(params);
      if (res.code == 200) {
        this.$message.success("换绑成功");
        this.$emit("update:visible", false);
        this.$emit("refresh");
      } else {
        this.$message.warning(res.status_desc);
      }
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    onSubmit() {
      this.changeBindConsultantFn();
    },
  },
  created() {
    this.form.currentConsultant = this.selectedRow.consultantName;
    this.getCardTypeConsultantListFn();
  },
};
</script>

<style lang="scss" scoped>
.record-wrapper {
  width: 100%;
  //   height: 64vh;
  overflow-y: hidden;
  background-position: center;
  background-size: 100% 100%;
  background-color: #fff;
  .container {
    // height: 100%;
    overflow: hidden;
    background-color: #fff;
    ::v-deep .el-select {
      width: 100%;
    }
    .remind {
      margin-bottom: 15px;
      color: #6a4aff;
    }
  }
  .operation {
    padding: 15px 0;
    border-top: 1px solid #f2f2f2;
    display: flex;
    justify-content: center;
    .btn {
      width: 100px;
    }
  }
}
::v-deep .el-dialog__body {
  padding-bottom: 0;
  padding-top: 20px;
}
</style>
